<!--
*@Author: QWP
*@Description: 加班申请
*@Date: 2024-07-08 17:04:38
-->
<template>
  <u-dialog v-bind="$attrs"
    @close="dialogClose">
    <a-layout class="f-h-100">
      <a-layout-content class="s-bg-white"
        style="overflow: auto">
        <a-space  direction="vertical" class="f-w-100">
          <u-busi-card title="基本信息"
            :bordered="false">
            <u-form :elements="formEls"
              :model="form"
              :gutter="0"
              ref="formRef">
            </u-form>
          </u-busi-card>
          <u-busi-card title="审核流程"
            :bordered="false">
            <AuditFlowCheck :data="auditFlowData"/>
          </u-busi-card>
        </a-space>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { FormInstance, FormItemProps } from 'ant-design-vue';
import AuditFlowCheck from '@/views/oa/personnel/checkinEdit/auditFlow/AuditFlow.vue'
import { _IAuditFlow } from '@/views/oa/personnel/checkinEdit/auditFlow/interface.ts'
import { urlFile } from '@/util/common'
import dayjs from 'dayjs';
const route = useRoute()

const formRef = ref<FormInstance>()
const form = reactive({
  title: dayjs().format('YYYY-MM-DD')
})
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '90px',
  colon: false
}
const formEls: Array<_IFormEl> = [
  { label: '录入时间', key: 'title', col: { span: 8,}, element: 'datepicker', 
    formItemProps: { ...formItemProps, },
    componentProps: { disabled: true }  
  },
  { label: '开始日期', key: 'zcflmc', col: { span: 8 }, element: 'datepicker', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '结束日期', key: 'jsrq', col: { span: 8 }, element: 'datepicker', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '天数', key: 'ts', col: { span: 8 }, element: 'number', 
    formItemProps: { ...formItemProps },
    componentProps: { disabled: true } 
  },
  { label: '事由', key: 'sm', col: { span: 24 }, element: 'textarea', 
    formItemProps: { ...formItemProps, required: true } 
  },
]

// 审核流程数据
const auditFlowData = reactive<Array<_IAuditFlow>>([
  { title: '抄送', 
    data: [
      {img: urlFile('login/login.png'), name: '丁艳玲'}
    ] 
  },
  { title: '审核', 
    data: [
      {img: urlFile('login/login.png'), name: '马权'},
      {img: urlFile('login/oa_login.png'), name: '王凌云'},
    ] 
  },
])

// 弹窗关闭
const dialogClose = () => {
  formRef.value.form.resetFields();
}
</script>

<style lang='scss' >
</style>